<template>
  <el-card class="card">
    <div class="chart-body" ref="chartRef"></div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "ChinaMap",
};
</script>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import china from "./china.json";
import { map } from "lodash";
// 注册地图
echarts.registerMap("china", china);

const chartRef = ref();

const data = china.features.map((item) => {
  return {
    name: item.properties.name,
    value: Math.round(Math.random() * 10000),
  };
});

//需要在组件挂载完获取DOM节点
onMounted(() => {
  const myEcharts = echarts.init(chartRef.value);
  const option = {
    series: {
      name: "新冠疫情当天数据",
      type: "map",
      map: "china",
      label: {
        show: true,
      },
      data,
    },
    tooltip: {},
    visualMap: {
      type: "piecewise",
      pieces: [
        { min: 10000 }, 
        { min: 1000, max: 9999 },
        { min: 100, max: 999 },
        { min: 10, max: 99 },
        { min: 1, max: 9 },
        { value: 0 },
      ],
    },
  };
  myEcharts.setOption(option);
});
</script>

<style scoped>
.chart-body {
  height: 500px;
}
</style>
